import React from "react"
import PropTypes from "prop-types" // 单独抽离出来了，之前在react里集成的，现在这么做是为了tree-sharking
class Com1_props extends React.Component {
  constructor(props) {
    super(props)
    // this.state = {}
  }

  render() {
    return <div>{this.props.text}</div>
  }
}

Com1_props.propTypes = {
  text: PropTypes.string.isRequired // string - 需要传递的类型， isRequired - 是否必传
}
Com1_props.defaultProps = {
  // 默认值，一般用于函数，如果传入是undefined,避免调用报错
  text: ""
}

// 其他类型 示例代码
Com1_props.propTypes = {
  // You can declare that a prop is a specific JS type. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: PropTypes.node, // 原生document.getElementById('root')这种

  // A React element.
  optionalElement: PropTypes.element, // reactElement, 意思是 react.createElement('div')这种，再详细点就是babel里的<HelloWorld />和<div>这种 (div会被babel转换)

  // You can also declare that a prop is an instance of a class. This uses
  // JS's instanceof operator.
  optionalMessage: PropTypes.instanceOf(Array), // 必须是Array的实例，当然你可以继续写成是某个组件的实例

  // You can ensure that your prop is limited to specific values by treating
  // it as an enum.
  optionalEnum: PropTypes.oneOf(["News", "Photos"]), // 数组中其中一个

  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    // 类型里的其中一个
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Array)
  ]),

  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    // 必须含有这些
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    // 必须除去这些
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

  // You can chain any of the above with `isRequired` to make sure a warning
  // is shown if the prop isn't provided.
  requiredFunc: PropTypes.func.isRequired, // isRequired必传某一项类型的值，这里是必传函数类型

  // A required value of any data type
  requiredAny: PropTypes.any.isRequired // 必传任意类型的值
}

export default Com1_props
